"use client"

import { cn } from '@/lib/utils';
import { useReactFlow } from '@xyflow/react';
import { ReactNode } from 'react'

function NodeCard({ children, nodeId, isSelected }: { nodeId: string; isSelected: boolean; children: ReactNode; }) {
    const { getNode, setCenter } = useReactFlow()
    return (
        <div
            onDoubleClick={() => {
                const node = getNode(nodeId)
                if (!node) {
                    return
                }
                // 获取node的位置以及形状大小
                const { position, measured } = node
                if (!position || !measured) {
                    return
                }
                const { width, height } = measured
                // 双击的时候设置居中显示 显示的时候 将中心点设置到 长和宽的中间
                // 使用!符号表示不进行类型检查 确定是有效的你不是null或undefined
                const x = position.x + width! / 2
                const y = position.y + height! / 2
                if (x === undefined || y === undefined) {
                    return
                }
                setCenter(x, y, {
                    zoom: 1,
                    duration: 500
                })
            }}
            className={cn('rounded-md cursor-pointer bg-background border-2 border-separate w-[420px] text-xs gap-1 flex flex-col',
                isSelected && "border-primary"
            )}
        >
            {children}
        </div>
    )
}

export default NodeCard